<template>
  <el-dialog :visible.sync="$attrs.visableIf" @close="handleCloseDialog" width="29%" append-to-body class="borderb_dia">
    <div slot="title" style="font-size: 14px;font-weight: 500;">
      批量修改发送时间间隔
    </div>
    <div style="margin-bottom: 20px;">
      <el-alert
        type="warning"
        :closable="false"
        show-icon>
        <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
          保存修改后，设置的间隔也将生效于新添加的内容
        </div>
      </el-alert>
    </div>
    <el-form :model="form" ref="form" label-position="right" size="small" class="send-setting-form" label-width="156px" :inline="true" @submit.native.prevent>
      <el-form-item prop="name">
        <span slot="label">
          <span>随机发送时间间隔</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">选择“时间段随机发送”的以及三种类型<br />的自动化SOP模板首次任务的消息时<br />间间隔</div>
            <svg-icon icon-class="question-circle-fill" style="margin-left: 4px;" />
          </el-tooltip>：
        </span>
        <div class="form-item-rows">
          <el-input size="small" style="width: 88px;" />
          <el-select v-model="form.value" placeholder="请选择" style="width: 88px;">
            <el-option
              v-for="item in times"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
          <el-button size="small" type="primary" plain>设置为推荐值</el-button>
        </div>
      </el-form-item>
      <el-form-item prop="name">
        <span slot="label">
          <span>精准发送时间间隔</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">选择“时间点精确发送”的消息时间间隔</div>
            <svg-icon icon-class="question-circle-fill" style="margin-left: 4px;" />
          </el-tooltip>：
        </span>
        <div class="form-item-rows">
          <el-input size="small" style="width: 88px;" />
          <el-select v-model="form.value1" placeholder="请选择"  style="width: 88px;">
            <el-option
              v-for="item in times"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select>
          <el-button size="small" type="primary" plain>设置为推荐值</el-button>
        </div>
      </el-form-item>
      <el-form-item prop="name" label="生效范围：">
        <el-radio-group v-model="form.radio">
          <el-radio :label="0"><span class="radio-text">仅修改当前日期</span></el-radio>
          <el-radio :label="1">
            <span class="radio-text">
              修改所有日期
            </span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">取 消</el-button>
      <el-button type="primary" @click="handleCloseDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      timeRange: [],//时间范围
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      form: {
        id: "",
        name: "",
        phone: "",
        email: "",
        status: "",
        password: "",
        type_id: [],
        value: 'second',
        value1: 'minute'
      },
      timeSet: {
        selectableRange: `08:00:00  - 23:59:00`,
        format: ' HH:mm'
      },
      times: [
        {label: '秒', value:'second'},
        {label: '分', value:'minute'},
        {label: '时', value:'hours'},
      ],
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        password: [],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {

  },
  methods: {
    changeTime(val) {
      console.log('修改val', val);
    },
    //重置表单
    handleReset() {
      this.resetForm("form");
    },

    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },

    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // editInfo(this.form).then(() => {
            //   this.$modal.msgSuccess('修改成功')
            //   this.handleCloseDialog();
            //   this.$emit('getList');
            // })
          }
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.form-item-rows {
  display: flex;
  gap: 6px;
}

.form-tips {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, .65);

  &.margin-up-down {
    margin: 10px 0;
  }
}

.setting-panel {
  padding-top: 20px;
  padding-bottom: 10px;
  border-top: 1px solid #e9e9e9;

  .title {
    color: #222333;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
  }

  .radio-text {
    font-size: 14px;
    color: rgba(0, 0, 0, .65);
    font-weight: 400;
  }

  .sleep-rows {
    display: flex;
    align-items: center;

    .title {
      margin-right: 8px;
      margin-bottom: 0px;
    }
  }

  .content {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .time-divider {
      margin: 0 8px;
    }
  }
}
::v-deep .el-dialog__footer {
  background:#fafafa;
  border-top: 1px solid #e9e9e9;
}
</style>
